<template>
  <div class="sylogins">
    <!-- 头部标题 -->
    <headMain />
    <div class="mkchoice">
      <div
        class="tool mk"
        v-for="item in mkdata"
        :key="item.id"
        @click="mkchoicefn(item.id)"
      >
        <img :src="item.src" alt="" class="normal mkimg" v-if="!item.show" />
        <img :src="item.srcac" alt="" class="active mkimg" v-if="!item.show" />
        <img :src="item.srcwc" alt="" v-if="item.show" class="mkwc" />
        <img :src="item.src" alt="" class="mkopti" v-if="item.show" />
      </div>
    </div>
  </div>
</template>

<script>
import headMain from '@/components/headMain.vue'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'WorkspaceJsonIndex',
  components: {
    headMain
  },
  computed: {
    ...mapState(['mkdata'])
  },
  methods: {
    ...mapActions(['updateData']),
    mkchoicefn(id) {
      if (!this.mkdata[id - 1].show) {
        this.$nextTick(() => {
          // 使用 Vue.set 或者展开语法来更新数组元素
          this.$set(this.mkdata, id - 1, { ...this.mkdata[id - 1], show: true })
          // 更新 Vuex 中的状态
          this.$store.dispatch('updateData', this.mkdata)
        })
        this.$router.push({
          name: 'mk' + id
        })
      } else {
        console.log('点击了已完成d')
        this.$confirm('是否重新操作已完成模块?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$router.push({
              name: 'mk' + id
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    }
  }
}
</script>

<style scoped>
.sylogins {
  background-color: #02284b;
  height: 100%;
  width: 100%;
}
</style>
